import React from 'react'
import { useParams } from 'react-router-dom'
// 引入详情页接口
import { getdetaildata } from '@/api/detail'
import { useEffect, useState } from 'react'
// 引入头部导航 navbar 组件
import NavBarCom from '@/components/NavBarCom'

// 引入数据类型声明文件
import { listItem } from '@/types/dataTypes'

type Props = {}

export default function Detail({ }: Props) {
    const [currentObj, setcurrentobj] = useState<listItem | {}>({})
    // 获取参数
    const par = useParams();

    useEffect(() => {
        // 获取参数
        // 请求详情页数据 (注意: 使用的时候,设置类型的断言)
        getdetaildata({ proid: (par as { proid: string }).proid }).then(res => {
            console.log('res', res);
            setcurrentobj(res.data.data)
        })
    }, [])

    return (
        <div className='detail'>
            {/* // 头部导航 */}
            <NavBarCom>详情页</NavBarCom>
            {/* // 详情页数据 */}
            <div>
                <img src={(currentObj as listItem).img1} alt="" />
            </div>
        </div>
    )
}